<template>
  <basic-crud :option="option">
    <template #iconCss="{ row }">
      <el-icon v-if="row.iconCss">
        <component :is="row.iconCss"></component>
      </el-icon>
    </template>
    <template #preview="{ row }">
      <el-button
        :type="row.color.split('/')[1]"
        :link="row.color.split('/')[0] === 'text'"
        :icon="row.iconCss"
        size="small"
        >{{ row.name }}</el-button
      >
    </template>
    <template #iconCss-form="{ disabled, formData }">
      <basic-crud-icon-select
        v-model="formData.iconCss"
        :disabled="disabled"
        placeholder="请选择 图标"
      ></basic-crud-icon-select>
    </template>
    <template #color-form="{ disabled, formData }">
      <el-select
        v-model="formData.color"
        placeholder="请选择颜色"
        :disabled="disabled"
      >
        <el-option
          v-for="item in colorList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <div style="text-align: center">
            <el-button
              :type="item.value.split('/')[1]"
              :link="item.value.split('/')[0] === 'text'"
              style="width: 80%"
              size="small"
              >{{ item.label }}
            </el-button>
          </div>
        </el-option>
      </el-select>
    </template>
  </basic-crud>
</template>

<script setup>
import {
  apiGetList,
  apiAdd,
  apiEdit,
  apiDel,
} from '@/apis/system/buttonManage.js'
const colorList = [
  { value: 'text/primary', label: '文字/主要' },
  { value: 'text/success', label: '文字/成功' },
  { value: 'text/info', label: '文字/主要' },
  { value: 'text/warning', label: '文字/警告' },
  { value: 'text/danger', label: '文字/危险' },
  {
    value: 'button/primary',
    label: '按钮/主要',
  },
  { value: 'button/success', label: '按钮/成功' },
  { value: 'button/info', label: '按钮/信息' },
  {
    value: 'button/warning',
    label: '按钮/警告',
  },
  { value: 'button/danger', label: '按钮/危险' },
]
const option = {
  height: 'auto',
  searchShow: true,
  updateBtn: true,
  menuWidth: 250,
  selection: false,
  addTitle: '新增按钮',
  editTitle: '修改按钮',
  dialogWidth: '60%',
  simplePage: true,
  labelWidth: 100,
  column: [
    {
      label: '编号',
      prop: 'code',
      search: true,
      sortable: true,
      maxlength: 30,
      minlength: 2,
      showWordLimit: true,
      rules: [{ required: true, message: '请输入编号', trigger: 'blur' }],
    },
    {
      label: '名称',
      prop: 'name',
      search: true,
      sortable: true,
      maxlength: 20,
      minlength: 2,
      showWordLimit: true,
      rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    },
    {
      label: '按钮位置',
      type: 'select',
      prop: 'buttonType',
      slot: true,
      sortable: true,
      rules: [{ required: true, message: '请选择按钮位置', trigger: 'change' }],
      dicData: [
        {
          label: '表外',
          value: 'out_table',
        },
        {
          label: '行内',
          value: 'in_line',
        },
      ],
    },
    {
      label: '按钮格式',
      prop: 'color',
      slot: true,
      width: '120',
      sortable: true,
      rules: [{ required: true, message: '请选择按钮格式', trigger: 'change' }],
      formatter: (val, value) => {
        return colorList.find((item) => item.value === value)?.label
      },
    },
    {
      label: '图标',
      prop: 'iconCss',
      slot: true,
      width: '80',
    },
    {
      label: '方法名',
      prop: 'functionName',
    },
    {
      label: 'if表达式',
      prop: 'expression',
    },
    {
      label: '按钮预览',
      prop: 'preview',
      display: false,
    },
  ],
}
const formData = ref({})
const searchData = ref({
  pageSize: 10,
  pageNum: 1,
})
const pageData = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const tableData = ref([])
const loading = ref(false)

const handleChangeSize = (val) => {
  pageData.value.pageSize = val
  getList()
}
const handleChangeCurrent = (val) => {
  pageData.value.currentPage = val
  getList()
}
// 获取列表
const getList = async (params, done) => {
  const resData = await apiGetList(
    Object.assign(
      {
        pageSize: pageData.value.pageSize,
        pageNum: pageData.value.currentPage,
      },
      params || searchData.value
    ),
    loading
  )
  tableData.value = resData.data
  pageData.value.total = resData.total
  done && done()
}
getList()

// 点击搜索按钮
const handleSearch = (params, done) => {
  pageData.value.currentPage = 1
  getList(params, done)
}

// 新增保存
const handleAddSave = async (row, done, loading) => {
  apiAdd(row)
    .then(() => {
      ElMessage.success('新增成功！')
      getList()
      done(row)
    })
    .finally(() => {
      loading()
    })
}

// 编辑保存
const handleEditSave = async (row, index, done, loading) => {
  apiEdit(row)
    .then(() => {
      ElMessage.success('修改成功！')
      getList()
      done(row)
    })
    .finally(() => {
      loading()
    })
}

// 删除
const handleDel = (row) => {
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    beforeClose: async (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        apiDel(row.id)
          .then(() => {
            ElMessage.success('删除成功！')
            done()
            getList()
          })
          .finally(() => {
            instance.confirmButtonLoading = false
          })
      } else {
        done()
      }
    },
  })
}
</script>

<style lang="scss" scoped></style>
